<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Memory Game</title>
<link rel="stylesheet" type="text/css" href="http://wproj.nada.kth.se/~dfa/Test/fil.css" />

<script type="text/javascript">
/*<![CDATA[*/
var words=["saab.jpg","volvo.jpg","bmw.jpg","vw.jpg","toyota.jpg","gm.jpg","honda.jpg","ford.jpg"];
var times=[0,0,0,0,0,0,0,0];
var size = 0;

var matrix;

var turned1 = null;
var turned2 = null;

var players = [0,0];
var activeplayer = 0;
var numberofturned = 0;

function tdHover(el)
{
   if(el.name != 3){
      document.getElementById(("p"+el.id)).src="hover.jpg";
//      el.src = "hover.jpg";
      el.name = 2;
   }
}

function tdUnHover(el)
{
   if(el.name != 3){
      document.getElementById(("p"+el.id)).src="unhover.jpg";
//      el.src = "unhover.jpg";
      el.name == 1;
   }
}

function tdClick(el)
{
if(turned2!=null){
   var img1 = document.getElementById(("p"+turned1.id));
   var img2 = document.getElementById(("p"+turned2.id))
   if(document.getElementById(("p"+turned1.id)).src!=document.getElementById(("p"+turned2.id)).src){
      img1.src = "unhover.jpg";
      img2.src = "unhover.jpg";
      turned1.name = 1;
      turned2.name = 1;
      if(activeplayer==0){
         activeplayer=1;
      } else {
	 activeplayer=0;
      }
      document.getElementById("score").rows[0].cells[1].innerHTML = activeplayer+1;
   }
   turned1=null;
   turned2=null;
} else {
if(el==turned1 || el.name==3){
   return;
}
row = parseInt(el.id.substring(0,1));
col = parseInt(el.id.substring(2,3));
document.getElementById(("p"+el.id)).src = matrix[row][col];
el.name = 3;
if(turned1==null){
   turned1 = el;
} else {
   turned2=el;
   if(document.getElementById(("p"+turned1.id)).src==document.getElementById(("p"+turned2.id)).src){
      turned1=null;
      turned2=null;
      numberofturned = numberofturned+1;
      players[activeplayer]++;
      document.getElementById("score").rows[activeplayer+1].cells[1].innerHTML = players[activeplayer];
      if(numberofturned==size){
         var winningplayer = 0;
	 if(players[0]>players[1]){
	    alert("Player 1 wins");
         } else {
            if(players[0] < players[1]){
	       alert("Player 2 wins");
            } else {
               alert("Tie");
            }
         }
         document.location = document.location;
      }
   }
}
}
}

function load()
{
size = words.length;
table = document.getElementById("board");
matrix = new Array();
for (var i = 0, row; row = table.rows[i]; i++) {
   matrix[i] = new Array();
   //iterate through rows
   //rows would be accessed using the "row" variable assigned in the for loop
   for (var j = 0, col; col = row.cells[j]; j++) {
     col.id = i + " " + j;
     col.innerHTML = "\<img class=\"smiley\" id=\"p"+col.id+"\" src\=\"unhover.jpg\"\/\>";
     col.name = 1;
     var rn=Math.floor(Math.random()*words.length)
     matrix[i][j] = words[rn];
     times[rn]=times[rn]+1;
     if(times[rn]==2){
	words.splice(rn,1);
	times.splice(rn,1);
     }
     //iterate through columns
     //columns would be accessed using the "col" variable assigned in the for loop
   }  
}
}
/*]]>*/
</script>






</head>
<body onload="load()">
<table class="board" id="board" border="2">
<tr>
<td onclick="tdClick(this)" onmouseover="tdHover(this)" onmouseout="tdUnHover(this)" ></td>
<td onclick="tdClick(this)" onmouseover="tdHover(this)" onmouseout="tdUnHover(this)" ></td>
<td onclick="tdClick(this)" onmouseover="tdHover(this)" onmouseout="tdUnHover(this)" ></td>
<td onclick="tdClick(this)" onmouseover="tdHover(this)" onmouseout="tdUnHover(this)" ></td>
</tr>
<tr>
<td onclick="tdClick(this)" onmouseover="tdHover(this)" onmouseout="tdUnHover(this)" ></td>
<td onclick="tdClick(this)" onmouseover="tdHover(this)" onmouseout="tdUnHover(this)" ></td>
<td onclick="tdClick(this)" onmouseover="tdHover(this)" onmouseout="tdUnHover(this)" ></td>
<td onclick="tdClick(this)" onmouseover="tdHover(this)" onmouseout="tdUnHover(this)" ></td>
</tr>
<tr>
<td onclick="tdClick(this)" onmouseover="tdHover(this)" onmouseout="tdUnHover(this)" ></td>
<td onclick="tdClick(this)" onmouseover="tdHover(this)" onmouseout="tdUnHover(this)" ></td>
<td onclick="tdClick(this)" onmouseover="tdHover(this)" onmouseout="tdUnHover(this)" ></td>
<td onclick="tdClick(this)" onmouseover="tdHover(this)" onmouseout="tdUnHover(this)" ></td>
</tr>
<tr>
<td onclick="tdClick(this)" onmouseover="tdHover(this)" onmouseout="tdUnHover(this)" ></td>
<td onclick="tdClick(this)" onmouseover="tdHover(this)" onmouseout="tdUnHover(this)" ></td>
<td onclick="tdClick(this)" onmouseover="tdHover(this)" onmouseout="tdUnHover(this)" ></td>
<td onclick="tdClick(this)" onmouseover="tdHover(this)" onmouseout="tdUnHover(this)" ></td>
</tr>
</table>
<table id="score" border="0">
<tr>
<td >Activeplayer:</td>
<td >1</td>
</tr>
<tr>
<td >Player1:</td>
<td >0</td>
</tr>
<tr>
<td >Player2:</td>
<td >0</td>
</tr>
</table>
  <p>
    <a href="http://validator.w3.org/check?uri=referer"><img
      src="http://www.w3.org/Icons/valid-xhtml11" alt="Valid XHTML 1.1" height="31" width="88" /></a>
  </p>

</body></html>

